<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3417935_2ocohmhi1nl.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3424875_iro93ctspef.css">
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .w {
            width: 1226px;
            margin: auto;
        }

        .topbar {
            background-color: #333;
        }

        .topbar-container {
            display: flex;
            justify-content: space-between;
        }

        .topbar-nav {
            display: flex;
        }

        .topbar-nav li {
            line-height: 40px;
        }

        .topbar-nav li a {
            color: #999;
        }

        .topbar-nav li a:hover {
            color: white;
        }

        .topbar-nav li span {
            margin: 0px 3.6px;
        }

        .topbar-download {
            position: relative;
        }

        .appcode {
            position: absolute;
            display: block;
            background-color: #fff;
            width: 120px;
            text-align: center;
            right: -30px;
            box-shadow: 0px 0px 1px 0px rgba(99, 99, 99, 0.5);
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        .appcode img {
            width: 80px;
            margin: 0 20px;
            margin-top: 10px;
        }

        .topbar-download:hover .appcode {
            visibility: visible;
            height: 130px;
            transition: 0.3s;
            z-index: 2;
        }

        .topbar-right {
            display: flex;
        }

        .topbar-login-reg {
            display: flex;
        }

        .topbar-login-reg li {
            line-height: 40px;
            color: #999;
        }

        .topbar-login-reg span {
            margin: 0 3.6px;
        }

        .topbar-login-reg li a:hover {
            color: #fff;
        }

        .personal-center {
            display: none;
        }

        .cart {
            width: 120px;
            line-height: 39px;
            background-color: #555;
            color: #888;
            margin-left: 20px;
            cursor: pointer;
            text-align: center;
            position: relative;
        }

        .cart i {
            font-size: 16px;
        }

        .cart-list {
            width: 300px;
            line-height: 100px;
            color: #000;
            background-color: #fff;
            box-shadow: 0px 0px 1px 0px rgba(99, 99, 99, 0.5);
            position: absolute;
            top: 40px;
            right: 0px;
            height: 0;
            overflow: hidden;
        }

        .cart:hover {
            background-color: #fff;
            color: #ff6a00;
        }

        .cart:hover .cart-list {
            height: 100px;
            transition: 0.3s;
        }

        .header-container {
            display: flex;
            justify-content: space-between;

        }

        .header-container h1 img {
            width: 56px;
            height: 56px;
            margin-top: 24px;
        }

        .header-nav {
            display: flex;
            position: relative;
        }

        .header-nav li {
            font-size: 16px;
            line-height: 100px;
            padding: 0 10px;
        }

        .header-nav li a:hover {
            color: #ff6a00;
        }


        .hide {
            position: absolute;
            left: -170px;
            height: 0px;
            overflow: hidden;
            z-index: 2;
            transition: 0.3s;
            background-color: #fff;
        }

        .hide-list {
            display: flex;
            justify-content: center;
            padding-top: 30px;
            border-top: 1px solid #999;
            overflow: hidden;
        }

        .hide-list li {
            text-align: center;
            line-height: 20px;
        }

        .hide-list span {
            height: 110px;
            display: inline-block;
            border-left: #999 1px solid;
            margin: 0 10px;
        }

        .header-nav li:hover .hide {
            height: 229px;
        }





        .search {
            margin-top: 25px;
            height: 50px;
            display: flex;

            border: 1px solid #999;
        }

        .search-text {
            width: 245px;
            padding: 0 10px;
            box-sizing: border-box;
            border: 0;
        }

        .search-btn {
            width: 52px;
            line-height: 50px;
            text-align: center;
            border-left: 1px solid #999;
            cursor: pointer;
            color: #000;
        }

        .search-btn i {
            font-size: 20px;
        }

        .search-btn:hover {
            color: #fff;
            background-color: #ff6a00;
        }

        /* 以上头部 */


        .browse-path {
            background-color: #f5f5f5;

        }

        .browse-path-container {
            line-height: 40px;
            height: 40px;
        }

        .browse-path-container a:hover {
            color: #ff6a00;
        }


        .mi-classify-container {
            height: 84px;
            text-align: left;
            line-height: 84px;
            display: flex;
            font-size: 14px;
        }

        .mi-classify-container p {
            margin-right: 60px;
            color: #999;
        }

        .mi-classify-container ul {
            display: flex;
        }

        .mi-classify-container ul li {
            width: 148px;
            cursor: pointer;
        }

        .mi-classify-container ul li a:hover {
            color: #ff6a00;
        }

        .classify-on {
            color: #ff6a00;
        }


        .page-main {
            padding: 20px 0 100px;
            background-color: #f5f5f5;
        }

        .order-list-box {
            margin: 20px 0;
            height: 30px;
        }

        .order-list {
            display: flex;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

        .order-list li {
            height: 20px;
            line-height: 20px;
            padding: 0 30px;
            cursor: pointer;
            border-right: rgb(204, 204, 204) 1px solid;
        }

        .order-list li:last-child {
            border: 0;
        }

        .order-list li:hover {
            color: #ff6a00;
        }

        .order-list-on {
            color: #ff6a00;
        }

        .order-list div {
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
        }


        .goods-list {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            margin-bottom: 100px;
        }

        .goods-list li {
            background-color: #fff;
            width: 24%;
            margin-left: 12px;
            height: 430px;
            text-align: center;
            padding-top: 50px;
            font-size: 14px;
            box-sizing: border-box;
            margin-bottom: 14px;
        }

        .goods-list li:hover {
            /* transform: translateY(-2px); */
            transition: all .3s linear;
            box-shadow: 0 0 3px 5px rgba(216, 206, 206, 0.3);
        }




        .goods-list h2 img {
            width: 200px;
            height: 200px;
            margin-bottom: 16px;
        }

        .goods-price {
            color: #ff6a00;
            margin-bottom: 15px;
        }

        .thumbs-list span {
            display: inline-block;
            width: 34px;
            height: 34px;
            margin: 0 4px;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            transition: border-color .2s linear;
        }

        .thumbs-list span:hover {
            border-color: #ff6a00;
        }

        .thumbs-list img {
            width: 34px;
            height: 34px;
        }


        /* .favourite-content {
            padding: 20px 0 100px;

        } */

        .recommend h2 {
            position: relative;
            height: 50px;
            font-size: 30px;
            color: #757575;
            border-top: 1px solid #e0e0e0;
        }

        .recommend h2 span {
            display: block;
            background-color: #f5f5f5;
            width: 482px;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: -30px;

        }



        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-wrapper {
            height: 400px;

        }

        .swiper-slide {
            display: flex;
            justify-content: space-between;
            background-color: #f5f5f5;
        }

        .swiper-slide li {
            width: 19%;
            height: 300px;
            background-color: #fff;
            overflow: hidden;
            position: relative;
        }

        .swiper-slide li img {
            width: 140px;
            height: 140px;
            margin: 30px 0 20px;
        }

        .swiper-slide li h4 {
            margin: 0 10px 10px;
            height: 18px;
            color: #333;
            cursor: pointer;
            font-size: 14px;
        }

        .swiper-slide li h5 {
            margin-bottom: 6px;
            color: #ff6a00;
        }

        .swiper-slide li p {
            font-size: 14px;
            color: #757575;
        }

        .hide-addcart {
            font-size: 14px;
            width: 128px;
            height: 30px;
            border: 1px solid #ff6a00;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: -48px;
            transition: .3s;
            background-color: #fff;
            visibility: hidden;
            line-height: 30px;
            cursor: pointer;

        }

        .swiper-slide li:hover .hide-addcart {
            visibility: visible;
            transform: translateY(-66px);
        }

        .hide-addcart:hover {
            background-color: #ff6a00;
            color: #fff;
        }





        /* 尾部 */

        .footer {
            background-color: #fff;
        }

        .footer-service {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-bottom: 1px solid #999;
        }

        .footer-service li {
            width: 19.8%;
            line-height: 25px;
            text-align: center;
            font-size: 16px;
            border-right: #999 1px solid;
        }

        .footer-service li:last-child {
            border: 0;
        }

        .footer-service li a {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-service li i {
            font-size: 26px;
            margin-right: 6px;
        }

        .footer-service li a:hover {
            transition: .2s;
            color: #ff6a00;
        }

        .footerlinks {
            padding: 40px 0;
            overflow: hidden;
        }

        .col-links {
            float: left;
            width: 160px;
        }

        .col-links dt {
            font-size: 14px;
            line-height: 1.25;
            color: #333;
            margin-bottom: 26px;
        }


        .col-contact {
            float: right;
            width: 251px;
            border-left: 1px solid #e0e0e0;
            text-align: center;
            color: #616161;
        }

        .col-contact h3 {
            font-size: 22px;
            line-height: 1;
            color: #ff6a00;
            margin: 0 0 5px 0;
        }

        .col-contact p {
            margin-bottom: 5px;
        }

        .col-contact-service {
            border: #ff6a00 1px solid;
            color: #ff6a00;
            background-color: #fff;
            display: inline-block;
            width: 118px;
            height: 28px;
            line-height: 28px;
            text-align: center;
        }

        .col-contact-service:hover {
            background-color: #ff6a00;
            color: #fff;
        }

        .col-contact h5 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .col-contact h5 i {
            margin-left: 6px;
            font-size: 24px;
        }

        .col-contact h5 i:hover {
            color: #ff6a00;
        }


        .into {
            padding: 30px 0;
            background-color: #fafafa;
        }

        .into-container {
            overflow: hidden;
        }

        .into-logo {
            float: left;
            margin-right: 20px;
        }

        .into-logo img {
            width: 56px;
            height: 56px;
        }

        .into-text {
            float: left;
        }

        .into-text p {
            color: #b0b0b0;
            line-height: 1.25;
        }

        .into-links img {
            width: 85px;
            height: 28px;
        }

        .slogan {
            margin-top: 30px;
            height: 19px;
            color: #b0b0b0;
            text-align: center;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="topbar">
        <div class="topbar-container w">
            <ul class="topbar-nav">
                <li><a href="">小米商城</a><span>|</span></li>
                <li><a href="">MIUI</a><span>|</span></li>
                <li><a href="">loT</a><span>|</span></li>
                <li><a href="">云服务</a><span>|</span></li>
                <li><a href="">天星数科</a><span>|</span></li>
                <li><a href="">有品</a><span>|</span></li>
                <li><a href="">小爱开放平台</a><span>|</span></li>
                <li><a href="">企业团购</a><span>|</span></li>
                <li><a href="">资质证照</a><span>|</span></li>
                <li><a href="">协议规则</a><span>|</span></li>
                <li class="topbar-download">
                    <a href="">下载app</a>
                    <span>|</span>
                    <span class="appcode">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
                        <i style="color: #000;">小米商城APP</i>
                    </span>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <div class="topbar-right">
                <ul class="topbar-login-reg">
                    <ul class="topbar-login-reg topbar-login-reg-on">
                        <li><a href="../html/Xiaomi_login.html">登录</a><span>|</span></li>
                        <li><a href="../html/Xiaomi_reg.html">注册</a><span>|</span></li>
                        <li><a href="">消息通知</a></li>
                    </ul>
                    <ul class="topbar-login-reg personal-center">
                        <li class="user-id"><a href="../html/Xiaomi_person.html"></a></li>
                        <li class="exit"><a href="">退出帐号</a></li>
                    </ul>
                </ul>
                <div class="cart"><i class="iconfont icon-xiazai1"></i>购物车<span>(0)</span>
                    <div class="cart-list">购物车空空如也</div>
                </div>

            </div>
        </div>
    </div>

    <header>
        <div class="header-container w">
            <h1><a href=""><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></a></h1>
            <ul class="header-nav">
                <li class="header-nav-one"><a href="">Xiaomi手机</a>
                    <div class="hide">
                        <ul class="hide-list">
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi 1S</h5>
                                    <strong>2299起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12 Pro</h5>
                                    <strong>4699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12</h5>
                                    <strong>3699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12X</h5>
                                    <strong>2999起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fea69fb5990da9dfc909aa8279aaea7e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 青春活力版</h5>
                                    <strong>1799起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi</h5>
                                    <strong>2299起</strong>
                                </a></li>
                        </ul>
                    </div>
                </li>

                <li class="header-nav-two"><a href="">Redmi红米</a>
                    <div class="hide">
                        <ul class="hide-list">
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi 1S</h5>
                                    <strong>2299起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12 Pro</h5>
                                    <strong>4699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34eec49ce46adcd4739e60a2b56062fc.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12</h5>
                                    <strong>3699起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 12X</h5>
                                    <strong>2999起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fea69fb5990da9dfc909aa8279aaea7e.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi 青春活力版</h5>
                                    <strong>1799起</strong>
                                </a></li>
                            <span></span>
                            <li><a href="">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=160&h=110&f=webp&q=90"
                                        alt="">
                                    <h5>Xiaomi Civi</h5>
                                    <strong>2299起</strong>
                                </a></li>
                        </ul>
                    </div>
                </li>
                <li class="header-nav-three"><a href="">电视</a></li>
                <li class="header-nav-four"><a href="">笔记本</a></li>
                <li class="header-nav-five"><a href="">平板</a></li>
                <li class="header-nav-six"><a href="">家电</a></li>
                <li class="header-nav-seven"><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <div class="search">
                <input type="text" class="search-text">
                <div class="search-btn">
                    <i class="iconfont icon-fangdajing"></i>
                </div>
            </div>

        </div>


    </header>


    <div class="browse-path">
        <div class="browse-path-container w">
            <a href="../html/Xiaomi_index.html">首页</a>
            <span>&gt;</span>
            <a href="../html/Xiaomi_list.html">全部结果</a>
            <span>&gt;</span>
            <span>小米手机</span>
        </div>

    </div>

    <div class="mi-classify">
        <div class="mi-classify-container w">
            <p>分类：</p>
            <ul>
                <li class="classify-on"><a href="">全部</a></li>
                <li><a href="">红米手机</a></li>
                <li><a href="">小米手机</a></li>
                <li><a href="">黑鲨手机</a></li>
            </ul>
        </div>
    </div>



    <div class="page-main">
        <div class="page-main-container w">
            <div class="order-list-box">
                <ul class="order-list">
                    <li class="order-list-on" data="goods_id">综合</li>
                    <li class="order-list-amount" data="goods_xl">销量</li>
                    <li class="order-list-price" data="goods_price">价格</li>
                    <div>↑<input type="radio" name="asa" class="asc"></div>
                    <div>↓<input type="radio" name="asa" class="desc"></div>
                </ul>
            </div>

            <ul class="goods-list">
                <!-- <a href="">
                    <li>
                        <h2><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d1e0bcbbcb21c4c7b23126f9d35a0bd8.png"
                                alt=""></h2>
                        <h3 class="goods-title">xiaomi</h3>
                        <p class="goods-price">1699</p>
                        <h4 class="thumbs-list">
                            <span><img
                                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d1e0bcbbcb21c4c7b23126f9d35a0bd8.png"
                                    alt=""></span>
                            <span><img
                                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d1e0bcbbcb21c4c7b23126f9d35a0bd8.png"
                                    alt=""></span>
                            <span><img
                                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d1e0bcbbcb21c4c7b23126f9d35a0bd8.png"
                                    alt=""></span>
                        </h4>
    
                    </li>
                </a> -->

            </ul>


            <div class="favourite-content">
                <div class="recommend">
                    <h2>
                        <span>猜你喜欢</span>
                    </h2>


                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <ul class="swiper-slide">
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45e49d5b5f78f11e9f99a9f95381235e.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e8ad7421796730fd980983aa9e7c1d9.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fcc87477432d45a0e13a544cd5d7b2f5.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7c6e79433c883e1a022ec21402c1679.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/9085cddd-530a-0bf0-8b09-74e96fa97cc9.jpg?thumb=1&w=180&h=180"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                            </ul>

                            <ul class="swiper-slide">
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0518e14e0e66f546a76802ebc15953b0.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2b2a2373047f8915830309a2e0314ee9.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29ab6d26b2aa18c3f418d603ed6f1910.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eabbad2ed0b714e6052a43107e94cb12.png?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b28153b80cb2c67564608e56d5c2f3f3.jpg?thumb=1&w=180&h=180&f=webp&q=90"
                                        alt="">
                                    <h4>Redmi K50</h4>
                                    <h5>2399元</h5>
                                    <p>25.8万人好评</p>
                                    <div class="hide-addcart">加入购物车</div>
                                </li>
                            </ul>




                            <!-- <div class="swiper-slide"></div>
                            <div class="swiper-slide"></div> -->
                        </div>
                        <!-- 分页 -->
                        <div class="swiper-pagination"></div>
                        <!-- 导航按钮 -->
                        <!-- <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div> -->

                    </div>

                </div>


            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-container w">
            <ul class="footer-service">
                <li>
                    <a href="">
                        <i class="iconfont icon-weixiubanshou"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-7tiantuihuanhuo"></i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-tian"></i>
                        <span>15天免费换货</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-liwuhuodong"></i>
                        <span>满69元包邮</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-didian"></i>
                        <span>520余家售后网点</span>
                    </a>
                </li>
            </ul>

            <div class="footerlinks">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店/专区</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                    <dd><a href="">企业社会责任</a></dd>
                    <dd><a href="">廉洁举报</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官方微信</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">公益基金会</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd><a href="">F码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
                <div class="col-contact">
                    <h3>400-100-5678</h3>
                    <p>8:00-18:00(仅收市话费)</p>
                    <a class="col-contact-service" href="">
                        <em class="iconfont icon-liuyan"></em>
                        <span>人工服务</span>
                    </a>
                    <h5><span>关注小米:</span>
                        <a href=""><i class="iconfont icon-xinlang"></i></a>
                        <a href=""><i class="iconfont icon-weixin"></i></a>
                    </h5>
                </div>
            </div>
        </div>
    </div>

    <div class="into">
        <div class="into-container w">
            <div class="into-logo">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
            </div>
            <div class="into-text">
                <h5>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 |
                    问题反馈 | Select Location</h5>
                <h5>北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</h5>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
                <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <div class="into-links">
                    <img src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="">
                    <img src="https://s01.mifile.cn/i/v-logo-2.png" alt="">
                    <img src="https://xyt.xinchacha.com/img/icon/icon3.png" alt="">
                    <img src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="">
                    <img src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1e68ce1fd7b9088931ef06942f02c99d.png"
                        alt="">
                </div>
            </div>

        </div>
        <div class="slogan w">让全球每个人都能享受科技带来的美好生活</div>
    </div>


    <script src="../js/jq.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/promise_ajax.js"></script>
    <script>



        const oNoLogin = document.querySelector('.topbar-login-reg-on');
        const oLogin = document.querySelector('.personal-center');
        const oUesrId = document.querySelector('.user-id a');
        const oExit = document.querySelector('.exit');
        // console.log(oExit);
        let login_res = localStorage.getItem('xiaomi_xiaomi_');
        // console.log(login_res);
        if (login_res) {
            oLogin.style.display = 'flex';
            oNoLogin.style.display = 'none';
            oUesrId.innerHTML = login_res;
        }
        else {
            oNoLogin.style.display = 'flex';
            oLogin.style.display = 'none';
        }

        //退出
        oExit.onclick = function () {

            location.href = './Xiaomi_index.html';
            localStorage.removeItem('xiaomi_xiaomi_');
        }

        //去购物车
        $('.cart').on('click', function () {
            console.log(1);
            if (login_res) {
                location.href = 'Xiaomi_cart.html';
            }
            else {
                const url = location;
                location.href = 'Xiaomi_login.html?accURL=' + url;
            }
        })







        //搜索
        const oSearchText = document.querySelector('.search-text');
        const oSearchBtn = document.querySelector('.search-btn');

        //升序，降序
        const oAsc = document.querySelector('.asc');
        const oDesc = document.querySelector('.desc');

        // //排序的类型
        // const oAmount = document.querySelector('.order-list-amount');//销量
        // const oPrice = document.querySelector('.order-list-price');//价格

        const oSortType = document.querySelectorAll('.order-list li');

        // console.log(oSortType)

        // 关键字
        let kw = '';
        // 排序
        let sort = '';
        // 排序的类型   前提是一定要知道数据库中的字段
        let sortType = 'goods_id';

        getData();

        // oSortType.forEach(v => {
        //     v.onclick = function () {
        //         sortType = v.getAttribute('data');

        //     }
        // })

        // console.log(oSortType);
        for (let i = 0; i < oSortType.length; i++) {
            // console.log(oSortType[i]);
            oSortType[i].onclick = function () {
                for (let i = 0; i < oSortType.length; i++) {
                    oSortType[i].classList.remove('order-list-on');

                }
                this.classList.add('order-list-on');
                sortType = this.getAttribute('data');
                console.log(sortType);
                getData();
                console.log(1);
            }
        }



        //关键字搜索
        oSearchBtn.addEventListener('click', function () {
            kw = oSearchText.value;
            getData();
        })
        //升序
        oAsc.addEventListener('click', function () {
            sort = 'asc';
            getData()
        })
        //降序
        oDesc.addEventListener('click', function () {
            sort = 'desc';
            getData()
        })



        async function getData() {
            const res = await goods_list({
                kw,
                sort,
                sortType
            })
            // console.log(res);
            const { status, msg, list } = res;
            if (status) {
                let html = '';
                // let htmlSpan;
                list.forEach(v => {
                    const {
                        goods_des,
                        goods_img,
                        goods_price,
                        goods_title,
                        goods_id,
                        goods_type
                    } = v;
                    // console.log(goods_img);
                    let imgArr = goods_img.split(',');
                    // console.log(imgArr);


                    // let goods_typeArr = goods_type.split(',');
                    // console.log(goods_typeArr);
                    let htmlSpan = '';
                    for (let i = 0; i < imgArr.length; i++) {
                        htmlSpan += `
                                <span><img
                                            src="${imgArr[i]}"
                                            alt="">
                                </span>
                                 `
                    }
                    // console.log(htmlSpan);
                    html += `
                    <li class="xs-img">
                        <a href="./Xiaomi_detail.html?id=${goods_id}">
                            <h2 class="big-img"><img src="${imgArr[0]}"
                                alt=""></h2>
                            <h3 class="goods-title s1">${goods_title}</h3>
                            <p class="goods-price">${goods_price}</p>
                            <h4 class="thumbs-list">${htmlSpan}</h4>
                        </a>
                    </li>`




                })

                // console.log(htmlSpan);
                const oGoodsList = document.querySelector('.goods-list');
                oGoodsList.innerHTML = html;

                // console.log($('.thumbs-list img'))
                $('.thumbs-list img').each((i, v) => {
                    $(v).on('mouseover', function () {
                        
                        let img_src = $(this).prop('src');

                        $(this).parents('.xs-img').find('.big-img img').prop('src', img_src);
                    })
                })



            }

        }






        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            //导航按钮
            // navigation: {
            //     nextEl: '.swiper-button-next',
            //     prevEl: '.swiper-button-prev',
            // },
            //自动轮播
            autoplay: {
                delay: 5000,//时间 毫秒
                disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
            },
            loop: true,//循环 最后面一个往后面滑动会滑到第一个
        });


    </script>





</body>

</html>